<template>
    <Page>
        <Topbar hideMenu />
        <Content>
            <Panel>
                <view class="left">
                    <Info />
                </view>
                <FormWrap header title="Form Demos">
                    <template slot="toolbar">
                        <view class="back" @click="back">
                            <u-icon name="arrow-left" color="#666" size="14" style="margin-right: 0.5rem;"></u-icon> 返回
                        </view>
                    </template>
                    <u-tabs :list="tabs" @click="changeTabs"></u-tabs>
                    <pre>
                    {{ model }}
                    </pre>
                    <u--form :labelPosition="activeTab" :model="model" :rules="rules" ref="uForm" labelWidth="16rem"
                        :labelStyle="{'margin-bottom' : activeTab === 'top' ? '2rem' : '0'}" style="
                        margin-top: 2rem; padding: 0 5rem;">
                        <u-form-item label="文本描述框">
                            {{ model.field0 }}
                        </u-form-item>
                        <u-form-item label="文本输入框" prop="field1" required>
                            <InputField v-model="model.field1">
                                <template slot="suffix">
                                    KG
                                </template>
                            </InputField>
                        </u-form-item>
                        <u-form-item label="数字输入框" prop="field2" required>
                            <InputNumberField v-model.number="model.field2">
                                <template slot="suffix">
                                    KG
                                </template>
                            </InputNumberField>
                        </u-form-item>
                        <u-form-item label="数字步长框" prop="field3" required>
                            <NumberBoxField v-model.number="model.field3" />
                        </u-form-item>
                        <u-form-item label="密码输入框" prop="field4" required>
                            <InputField v-model="model.field4" type="password" />
                        </u-form-item>
                        <u-form-item label="验证码输入框" prop="field5" required>
                            <InputCaptcheField v-model="model.field5" @generateUUID="generateUUID" />
                        </u-form-item>
                        <u-form-item label="下拉选择框" prop="field6" required>
                            <uni-data-select v-model="model.field6" :modelValue="model.field6" :localdata="list"
                                :clear="false" format="{label}" placeholder="请选择"></uni-data-select>
                        </u-form-item>
                        <u-form-item label="单选组" prop="field7">
                            <u-radio-group v-model="model.field7" placement="row">
                                <u-radio v-for="(item, index) in list" :key="index" :label="item.label"
                                    :name="item.label">
                                </u-radio>
                            </u-radio-group>
                        </u-form-item>
                        <u-form-item label="开关" prop="field8">
                            <u-switch v-model="model.field8" />
                        </u-form-item>
                        <u-form-item label="日期" prop="field9">
                            <DatePicker v-model="model.field9" />
                        </u-form-item>
                        <u-form-item label="上传图片" prop="field10">
                            <ImageUpload v-model="model.field10" />
                        </u-form-item>
                        <u-form-item label="日期时间" prop="field11">
                            <DatePicker v-model="model.field11" mode="dateTime" />
                        </u-form-item>
                        <u-form-item label="多选PICKER" prop="field12">
                            <MultipleSelect v-model="model.field12" :list="list" />
                        </u-form-item>
                        <u-form-item label="单选PICKER" prop="field13">
                            <SingleSelect v-model="model.field13" :list="list" mode="single" />
                        </u-form-item>
                    </u--form>
                    <template slot="footer">
                        <Button large @click="openUniModal">
                            默认按钮
                        </Button>
                        <Button large type="success" @click="open" style="margin-left: 3rem;">
                            弹出确认框
                        </Button>
                        <Button large type="primary" @click="submit" style="margin-left: 3rem;">
                            提交
                        </Button>
                    </template>
                </FormWrap>
            </Panel>
        </Content>
        <Modal title="请选择中断原因" ref="popup" @confirm="confirm">
            <uni-data-select v-model="model.field6" :label="`中断原因`" :modelValue="model.field6" :localdata="list"
                format="{label}" placeholder="请选择"></uni-data-select>
        </Modal>
    </Page>
</template>

<script>
    import Page from "@/components/page/index.vue";
    import Topbar from "@/components/topbar/index.vue";
    import Content from "@/components/content/index.vue";
    import Panel from "@/components/panel/index.vue";
    import Info from "@/components/info/index.vue";
    import Empty from "@/components/empty/index.vue";
    import FormWrap from '@/components/formWrap/index.vue';
    import InputField from '@/components/formField/inputField/index.vue';
    import InputCaptcheField from '@/components/formField/inputCaptcheField/index.vue';
    import InputNumberField from '@/components/formField/inputNumberField/index.vue';
    import NumberBoxField from '@/components/formField/numberBoxField/index.vue';
    import DatePicker from '@/components/formField/datePicker/index.vue';
    import ImageUpload from '@/components/formField/imageUpload/index.vue';
    import MultipleSelect from '@/components/formField/multipleSelect/index.vue';
    import SingleSelect from '@/components/formField/singleSelect/index.vue';
    import Modal from '@/components/modal/index.vue';
    import Button from "@/components/button/index.vue";

    import fetch from "@/utils/fetch";
    import {
        getToken
    } from '@/store/user.js';

    export default {
        components: {
            Page,
            Topbar,
            Content,
            Panel,
            Info,
            Empty,
            FormWrap,
            InputField,
            InputCaptcheField,
            InputNumberField,
            NumberBoxField,
            DatePicker,
            ImageUpload,
            MultipleSelect,
            SingleSelect,
            Modal,
            Button,
        },
        data() {
            return {
                tabs: [{
                    name: '左右布局',
                    value: 'left'
                }, {
                    name: '上下布局',
                    value: 'top'
                }],
                activeTab: 'left',
                list: [{
                        label: '选项1',
                        value: '选项1', //uni-data-select的下拉数组必须有value
                    },
                    {
                        label: '选项2',
                        value: '选项2',
                    },
                    {
                        label: '选项3',
                        value: '选项3',
                    },
                    {
                        label: '选项4',
                        value: '选项4',
                    },
                    {
                        label: '选项5',
                        value: '选项5',
                    }
                ],
                model: {
                    uuid: '',
                    field0: '描述一段话',
                    field1: '',
                    field2: '1',
                    field3: '8',
                    field4: '',
                    field5: '',
                    field6: '',
                    field7: '选项1',
                    field8: false,
                    field9: Number(new Date()),
                    field10: [],
                    field11: Number(new Date()),
                    field12: [],
                    field13: ''
                },
                rules: {
                    'field1': {
                        type: 'string',
                        required: true,
                        message: '文本输入框值不能为空',
                        trigger: ['blur', 'change']
                    },
                    'field2': {
                        type: 'number',
                        required: true,
                        message: '数字输入框值必须为数字类型且不能为空',
                        trigger: ['blur', 'change']
                    },
                    'field3': {
                        type: 'number',
                        required: true,
                        message: '数字输入框值必须为数字类型且不能为空',
                        trigger: ['blur', 'change']
                    },
                    'field4': {
                        type: 'string',
                        required: true,
                        message: '密码不能为空',
                        trigger: ['blur', 'change']
                    },
                    'field5': {
                        type: 'string',
                        required: true,
                        message: '验证码不能为空',
                        trigger: ['blur', 'change']
                    },
                    'field6': {
                        type: 'string',
                        required: true,
                        message: '下拉框值不能为空',
                        trigger: ['blur', 'change']
                    }
                },
            }
        },
        methods: {
            back() {
                uni.navigateBack(-1)
            },
            changeTabs(item) {
                this.activeTab = item.value;
            },
            generateUUID(uuid) {
                this.model.uuid = uuid;
            },
            openUniModal() {
                uni.showLoading({
                    title: '正在自动更新...',
                    mask: true,
                });
            },
            open() {
                this.$refs.popup.open()
            },
            dialogConfirm() {
                console.log('点击确认');
            },
            confirm() {
                console.log('点击确认');
            },
            submit() {
                this.$refs.uForm.validate();
            },

        }
    };
</script>

<style scoped lang="scss">
    pre {
        padding: 2rem;
        margin: 2rem;
        border: 1px solid #ccc;
        border-radius: 1rem;
        font-size: 2rem;
        background: #000;
        color: #fff;
    }

    .back {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #666;
    }

    .left {
        flex: 0 auto;
        width: 50rem;
        background: #f8f8fa;
    }
</style>